<template>
  <div class="login">
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <el-form ref="form" label-width="80px">
          <el-form-item label="邮箱">
            <el-input v-model="email" placeholder="邮箱"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input type="password" v-model="password" placeholder="密码"></el-input>
          </el-form-item>

          <el-form-item label="" class="left">
            <el-checkbox label="一周免登录" name="expire" v-model="oneweek"></el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
          </el-form-item>

        </el-form>
      </el-col>
    </el-row>      
  </div>
</template>

<script>
  import cookie from 'vue-cookie'
  export default {
    name: 'Index',
    data () {
      return {
        email: '',
        password: '',
        oneweek: false
      }
    },
    methods: {
      onSubmit: function () {
        const page = this
        window.axios.post('api/login/email', {
          email: this.email,
          password: this.password,
          keep_one_week: this.oneweek
        })
        .then(function (response) {
          let token = response.data.token
          let user = response.data.user
          cookie.set('token', token, { expires: '1799s' })
          cookie.set('user', user)
          page.$router.push('/home')
        })
        .catch(function (error) {
          console.log(error)
        })
      }
    }
  }
</script>

<style type="text/css">
  form button {
    float: right;
  }

  .login {
    margin-top: 100px;
  }
</style>